<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo超星大数据展示系统</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
    <!--<link rel="stylesheet" href="static/js/lib/bootstrap/css/bootstrap.min.css"/>-->
    <link rel="stylesheet" href="static/css/base.css"/>
    <link rel="stylesheet" href="static/css/animate.min.css"/>
    <link rel="stylesheet" href="static/css/swiper.min.css"/>
    <link rel="stylesheet" href="static/css/liMarquee.css"/>

    <!-- 文字动效-->
    <!--<link rel="stylesheet" href="static/css/txt.wav.css"/>-->
    <!--<link href="static/css/jquery-letterfx.css" rel="stylesheet" type="text/css" />-->
    <!--<link href="static/css/demo.css" rel="stylesheet" type="text/css" />-->
    <!--文字动效结束-->
    <link rel="stylesheet" href="static/css/index.css" id="pc_link"/>
</head>
<!--<body onload="dwr.engine.setActiveReverseAjax(true)">-->
<body>
<div class="kp_big_screen">
    <div class="kp_screen_top clearfix">
        <div class="kp_rank">
                <div class="rank_title">借阅排行榜</div>
                <div class="rank_con">
                    <div class="polygon6" id="polygon6"></div>
                    <div class="polygon5" id="polygon5"></div>
                    <div class="polygon4" id="polygon4"></div>
                    <div class="polygon3" id="polygon3"></div>
                    <div class="polygon2" id="polygon2"></div>
                    <div class="polygon1" id="polygon1"></div>
                    <div data-flag="0" class="rank_flag rank_flag_left flag_left_top">NO1</div>
                    <div data-flag="5" class="rank_flag rank_flag_left flag_left_mid">NO6</div>
                    <div data-flag="4" class="rank_flag rank_flag_left flag_left_bot">NO5</div>
                    <div data-flag="1" class="rank_flag rank_flag_right flag_right_top">NO2</div>
                    <div data-flag="2" class="rank_flag rank_flag_right flag_right_mid">NO3</div>
                    <div data-flag="3" class="rank_flag rank_flag_right flag_right_bot">NO4</div>
                    <div class="rank_books" id="rank_books">
                         <div class="hide" style="background-image: url(upload/rank1.jpg);background-size: cover;"></div>
                         <div class="hide" style="background-image: url(upload/rank2.jpg);background-size: cover;"></div>
                         <div class="hide" style="background-image: url(upload/recommend_book1.png);background-size: cover;"></div>
                         <div class="hide" style="background-image: url(upload/rank4.jpg);background-size: cover;"></div>
                         <div class="hide" style="background-image: url(upload/rank5.jpg);background-size: cover;"></div>
                         <div class="hide" style="background-image: url(upload/rank6.jpg);background-size: cover;"></div>
                         <!--<img src="upload/rank1.jpg" alt="" class="rank_books_six hide"/>-->
                         <!--<img src="upload/rank2.jpg" alt="" class="rank_books_five hide"/>-->
                         <!--<img src="upload/recommend_book1.png" alt="" class="rank_books_four hide"/>-->
                         <!--<img src="upload/rank4.jpg" alt="" class="rank_books_three hide"/>-->
                         <!--<img src="upload/rank5.jpg" alt="" class="rank_books_two hide"/>-->
                         <!--<img src="upload/rank6.jpg" alt="" class="rank_books_one hide"/>-->
                    </div>
                </div>
                <div class="rank_des">
                    <div class="rank_des_pub">
                        <span class="paiming">NO1</span>
                        <span style="color:#fff;">与故土一拍两散</span>
                    </div>
                    <div class="rank_des_pub">
                        <span class="paiming">NO2</span>
                        <span style="color:#fff;">国家为什么会崩溃</span>
                    </div>
                    <div class="rank_des_pub">
                        <span class="paiming">NO3</span>
                        <span style="color:#fff;">“玩”全二维码营销</span>
                    </div>
                    <div class="rank_des_pub paiming_three" style="line-height: 53px">
                        <span class="paiming" style="color:#9ca4b2;">NO4</span>
                        <span>慧眼初开</span>
                    </div>
                    <div class="rank_des_pub paiming_four" style="line-height: 55px">
                        <span class="paiming" style="color:#9ca4b2;">NO5</span>
                        <span>没有深夜痛哭过的人，不足以谈人生</span>
                    </div>
                    <div class="rank_des_pub paiming_six" style="line-height: 60px">
                        <span class="paiming" style="color:#9ca4b2;">NO6</span>
                        <span>纸杜鹃</span>
                    </div>
                </div>
        </div>
        <div class="kp_banner">
            <div class="banner_header">
                <div class="header_logo">
                    <img src="static/images/logo.png" alt=""/>
                </div>
                <p id="big_title_txt">实时大数据展示系统</p>
                <div class="left_bg">
                    <img src="static/images/logo_left.png" alt=""/>
                </div>
                <div class="right_bg">
                    <img src="static/images/logo_right.png" alt=""/>

                </div>
            </div>
            <div class="banner_con">
                <div class="kp_line_title">
                    <img src="static/images/pub_icon.png" alt=""/>
                    <p class="title_txt_top">OUR STYLE</p>
                    <p class="title_txt_bot">本馆风采</p>
                    <!--<button onclick="openfullscreen()" class="full_btn">Open</button>-->
                    <!--<button onclick="exitFullscreen()" class="exit_btn">Exit</button>-->
                </div>
                <div class="banner_pic">
                    <!-- 只有图片和下面的横线是定位，其他都是正常的-->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <!--<div class="swiper-slide"><img src="upload/banner_pic.png" alt="" title=""/></div>-->
                            <!--<div class="swiper-slide"><img src="upload/1.png" alt="" title="" /></div>-->
                            <!--<div class="swiper-slide"><img src="upload/2.png" alt="" title="" /></div>-->
                            <!--<div class="swiper-slide"><img src="upload/3.png" alt="" title="" /></div>-->
                        </div>
                    </div>
                    <div class="banner_mid_bg">
                        <!--这一层是放轮播图-->
                        <!-- 这一层是错出来的边框直接定位到mid_bg背景图上的-->
                        <!--<div class="banner_mid_bg" id="banner_mid_bg2"></div>-->
                    </div>
                    <div class="banner_run" id="banner_run">
                        <ul id="lamp" class="clearfix">
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>
                            <li class="dim"><img src="static/images/banner/onelamp.png" alt=""/></li>


                        </ul>
                    </div>
                    <div class="lamp_line">
                        <img src="static/images/banner/lamp_line.png" alt=""/>
                    </div>
                </div>
            </div>
        </div>
        <div class="kp_borrow">
            <div class="kp_date clearfix">
                <div class="kp_weather">
                    <div class="kp_weather_ads" id="kplace"></div>
                    <div class="kp_weather_what" id="kpweather"></div>
                    <div class="kp_weather_temp" id="kptemp"></div>
                </div>
                <div class="kp_time">
                    <div id="kp_clock"></div>
                    <div id="kp_t">
                        <span id="t_h"></span>
                        <span id="t_m"></span>
                        <div style="display: inline-block">
                            <span id="t_s"></span>
                            <p id="t_current">CURRENT TIME</p>
                        </div>

                    </div>
                </div>

            </div>
            <div class="kp_line_title">
                <img src="static/images/pub_icon.png" alt=""/>
                <p class="title_txt_top">BORROW THE BOOK SYSTEM</p>
                <p class="title_txt_bot">借还书系统</p>
            </div>
            <div class="kp_line_con">
                <div id="main3"></div>
                <div class="line_title">借出还入曲线图</div>
            </div>
            <div class="borrow_num">
                <ul class="clearfix">
                    <li style="width: 20%">
                        <p>今日借阅</p>
                        <div>
                            <span class="borrow_book_num" id="myTargetElement">89</span>
                            <span class="ce">册</span>
                        </div>
                    </li>
                    <li style="width: 25%">
                        <p>本周借阅</p>
                        <div>
                            <span class="borrow_book_num" id="myTargetElement2">289</span>
                            <span class="ce">册</span>
                        </div>
                    </li>
                    <li style="width: 45%">
                        <p>累计借阅</p>
                        <div>
                            <span class="borrow_book_num" id="myTargetElement3">8560000</span>
                            <span class="ce">册</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="kp_screen_bottom clearfix">
        <div class="kp_count">
            <div class="kp_line_title">
                <img src="static/images/pub_icon.png" alt=""/>
                <p class="title_txt_top">TO THE MUSEUM STATISTICS</p>
                <p class="title_txt_bot">到馆统计</p>
            </div>
            <div class="count_num">
                <div class="count_num_top">
                    <ul class="clearfix">
                        <li class="clearfix">
                            <div class="num_left">
                                <p><span id="kp_count_num1">276</span><span>人</span></p>
                                <p>今日到馆</p>
                            </div>
                            <div class="num_right clearfix">
                                <div class="box2">
                                    <!-- box2_inner定位到box2上-->
                                    <div class="box2_inner"></div>
                                    <div class="box2_inner_inner" id="box2_inner_inner1">
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_01"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_02"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_03"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_04"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_05"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_06"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_07"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_08"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_09"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_10"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_11"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_12"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_13"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_14"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_15"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_16"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_17"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_18"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_19"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_20"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_21"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_22"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_23"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_24"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_25"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_26"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_27"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_28"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_29"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_30"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_31"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_32"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_33"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_34"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_35"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_36"/>

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="num_left">
                                <p><span id="kp_count_num2">218</span><span>人</span></p>
                                <p>当前在馆</p>
                            </div>
                            <div class="num_right clearfix">
                                <div class="box2">
                                    <!-- box2_inner定位到box2上-->
                                    <div class="box2_inner"></div>
                                    <div class="box2_inner_inner" id="box2_inner_inner2">
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_01"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_02"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_03"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_04"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_05"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_06"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_07"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_08"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_09"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_10"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_11"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_12"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_13"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_14"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_15"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_16"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_17"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_18"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_19"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_20"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_21"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_22"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_23"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_24"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_25"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_26"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_27"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_28"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_29"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_30"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_31"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_32"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_33"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_34"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_35"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_36"/>


                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="num_left">
                                <p><span id="kp_count_num3">1568</span><span>人</span></p>
                                <p>本周到馆</p>
                            </div>
                            <div class="num_right clearfix">
                                <div class="box2">
                                    <!-- box2_inner定位到box2上-->
                                    <div class="box2_inner"></div>
                                    <div class="box2_inner_inner" id="box2_inner_inner3">
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_01"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_02"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_03"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_04"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_05"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_06"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_07"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_08"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_09"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_10"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_11"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_12"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_13"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_14"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_15"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_16"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_17"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_18"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_19"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_20"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_21"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_22"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_23"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_24"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_25"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_26"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_27"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_28"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_29"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_30"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_31"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_32"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_33"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_34"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_35"/>
                                        <img src="static/images/count/one_white.png" alt="" class="hide img_36"/>


                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>

                </div>
                <div class="count_num_bottom">
                    <p>自2017年1月开始累计到馆</p>
                    <div class="box">
                        <div class="rectangle_bg">
                            <div class="rectangle">
                                <span id="myTargetElementt">432626274</span>
                                <span class="total_ren">人</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="kp_notice">
            <div class="kp_line_title">
                <img src="static/images/pub_icon.png" alt=""/>
                <p class="title_txt_top">TO THE NOTICE</p>
                <p class="title_txt_bot">通知</p>
            </div>
            <div class="notice_con">
                <div class="notice_con_title">超星数字图书馆</div>
                <div class="notice_con_list" style="overflow:hidden;">
                </div>
            </div>
        </div>
        <div class="kp_recommend clearfix">
            <div class="kp_last_title">
                <img src="static/images/recommend/rec_msg.png" alt=""/>
                <p class="txt_last_right">RECOMMENDATION</p>
                <p class="txt_last_left">今日推荐</p>
            </div>
            <div class="recommend_con">
                <div class="recommend_con_circle5">
                    <div class="circle_mother">
                       <!--<div class="recommend_con_circle4" style="-webkit-animation:qn 8s linear 0s infinite;animation:qn 8s linear 0s infinite;-webkit-transform-origin: center center;transform-origin: center center;"></div>-->
                       <!--<div class="recommend_con_circle"></div>-->
                       <!--<div class="recommend_con_circle3" style="-webkit-animation:qw 8s linear 0s infinite;animation:qn 8s linear 0s infinite;-webkit-transform-origin: center center;transform-origin: center center;"></div>-->
                       <!--<div class="recommend_con_circle2" style="-webkit-animation:qn 8s linear 0s infinite;animation:qn 8s linear 0s infinite;-webkit-transform-origin: center center;transform-origin: center center;"></div>-->
                       <!--<div class="recommend_con_circle1" style="-webkit-animation:qw 8s linear 0s infinite;animation:qn 8s linear 0s infinite;-webkit-transform-origin: center center;transform-origin: center center;"></div>-->

                        <div class="recommend_con_circle4" style="-webkit-animation:qn 8s linear 0s infinite;animation:qn 8s linear 0s infinite;"></div>
                        <div class="recommend_con_circle"></div>
                        <div class="recommend_con_circle3" style="-webkit-animation:qw 8s linear 0s infinite;animation:qw 8s linear 0s infinite;"></div>
                        <div class="recommend_con_circle2" style="-webkit-animation:qn 8s linear 0s infinite;animation:qn 8s linear 0s infinite;"></div>
                        <div class="recommend_con_circle1" style="-webkit-animation:qw 8s linear 0s infinite;animation:qw 8s linear 0s infinite;"></div>
                       <div class="recommend_con_book" id="recommend_con_book">
                           <img src="upload/24.jpg" alt="" class="rank_books_six show"/>
                           <img src="upload/25.jpg" alt="" class="rank_books_five hide"/>
                           <img src="upload/26.jpg" alt="" class="rank_books_four hide"/>
                       </div>
                    </div>
                    <div class="recommend_sao_title">
                        <span class="sao_01">扫</span>
                        <span class="sao_02">码</span>
                        <span class="sao_03">看</span>
                        <span class="sao_04">书</span>
                    </div>
                    <div class="recommend_sao_num">
                        <div id="two_code">56</div>
                        <div>人次</div>
                        <div>当前扫码借阅</div>
                    </div>
                    <div class="recommend_bot">"玩"全二维码营销</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="static/js/lib/jquery-3.2.1.min.js"></script>
<!--<script src="static/js/lib/engine.js"></script>-->
<script src="static/js/lib/echarts.min.js"></script>
<script src="static/js/lib/swiper.min.js"></script>
<script src="static/js/lib/jquery.liMarquee.js"></script>
<!--这三个用来做数字变化时间长了数字容易变小，可能是获取dom元素节点的原因，等后期数据对接之后看情况-->
<script src="static/js/lib/jquery.waypoints.min.js"></script>
<script src="static/js/lib/jquery.countup.min.js"></script>
<script src="static/js/lib/countUp.min.js"></script>
<!--以上三个结束-->
<!--标题文字动态效果-->
<!--<script src="static/js/lib/txt.wav.min.js"></script>-->
<!--标题文字动效结束-->
<script src="static/js/view/tool.js"></script>
<script src="static/js/view/index.js"></script>
<script src="static/js/lib/template.js"></script>
<script type="text/html" id="p_template">
    {{if data}}
    {{each data as value i}}
    <ul class="roll__list">
        <li class="p_scroll" data-title={{value.title}} style="color:#4bc1fe;font-size:0.16rem;">{{value.content}}</li>
    </ul>
    {{/each}}
    {{/if}}
</script>

<script>
    my_init()
    select_style();///初始化选择要播放的内容
    var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 1,
            paginationClickable: true,
            spaceBetween: 30,
            loop: true,
            autoplay: 4000,
        });

</script>
</body>
</html>

